<template>
    <view class="page">
        <intake-nav-bar title="设置" dark :fixed="true" />
        <!-- 功能列表区域 -->
        <view class="menu-card">
            <view class="menu-content">
                <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
                    <text class="menu-text">{{ item.text }}</text>
                    <uni-icons type="right" size="16" color="#CCCCCC" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            menuList: [
                { text: '用户协议', key: '4' },
                { text: '隐私协议', key: '3' },
                { text: '个性化推荐', key: '5' },
            ],
        }
    },
    methods: {
        handleMenuClick(e) {
            // 用户协议
            if (e.key === '4') {
                uni.navigateTo({
                    url: '/pages/users_purchasing/privacy/index?type=4'
                });
            } else if (e.key === '3') { //隐私协议
                uni.navigateTo({
                    url: '/pages/users_purchasing/privacy/index?type=3'
                });
            }else if (e.key === '5') {
                uni.navigateTo({
                    url: '/pages/user/individuality'
                });
            }
        },
        goMenuPage(url) {
            console.log(url)
            uni.navigateTo({
                url: url,
                fail(err) {
                    // uni.switchTab({
                    //   url: url
                    // })
                }
            })
        },
    }
}
</script>
<style lang="scss">
page {
    width: 100%;
    height: 100vh;
    padding: 20px;
    background: linear-gradient(to bottom, #E3EAFB 0%, transparent 100%);
}


.menu-card {
    width: 690rpx;
    height:264rpx;
    background: #F5F9FF;
    border-radius: 30rpx;
    // margin: -20rpx 0 0;
    // padding: 62rpx 30rpx;
}

.menu-content {
    width: 690rpx;
    height: 264rpx;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10rpx;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    padding: 20rpx;

    /* border-bottom: 1px solid #EEEEEE; */
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-text {
    font-size: 24rpx;
    color: #333333;
}

.button-wrapper {
    margin: 48rpx 32rpx;
    width: 690rpx;
    height: 69rpx;
    line-height: 69rpx;
    background: #fff;
    font-size: 24rpx;
    border-radius: 10rpx;
    margin: 48rpx 0;
    padding: 0 20rpx;
}

.login-button {
    width: 690rpx;
    height: 69rpx;
    line-height: 69rpx;
    background: #fff;
    font-size: 24rpx;
    border-radius: 10rpx;
    margin-left: -30rpx;
}

wx-button {
    background-color: #fff;
}

.login-button:active {
    opacity: 0.8;
}
</style>
<style lang="scss" scoped>
.popup-content {
    // @include flex;
    width: 586rpx;
    height: 294rpx;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 46rpx 35rpx;

    .tip-title {
        font-size: 36rpx;
        font-weight: 550;
    }

    .message-text {
        margin: 30rpx 0;
        font-size: 24rpx;
        color: #333;
    }

    .cancel-btn {
        border: solid 1px #034EFD;
        border-radius: 40rpx;
        text-align: center;
        width: 227rpx;
        height: 69rpx;
        line-height: 69rpx;
        float: left;
        color: #034EFD;
        margin-right: 50rpx;
    }

    .confirm-btn {
        background-color: #034EFD;
        border-radius: 40rpx;
        text-align: center;
        width: 227rpx;
        height: 69rpx;
        line-height: 69rpx;
        float: left;
        color: #fff;
    }
}
</style>